<template>
	<view class="page">
		<!-- 缴费信息 -->
		<view class="paymentInfo">
			<view class="title">
				缴费信息
			</view>
			<view class="payInfolists">
				<view class="payInfolist">
					<view class="payname">
						就诊人
					</view>
					<view class="paycontent">
						王小柯
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						登记号
					</view>
					<view class="paycontent">
						20200101001598Z
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						就诊科室
					</view>
					<view class="paycontent">
						门诊外一科
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						开单医生
					</view>
					<view class="paycontent">
						刘医师
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						开单时间
					</view>
					<view class="paycontent">
						2020-01-01 10:20:36
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="payInfolists">
				<view class="payInfolist">
					<view class="payname">
						订单编号
					</view>
					<view class="paycontent">
						2021010156256894
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						下单时间
					</view>
					<view class="paycontent">
						2020-01-01 10:23:36
					</view>
				</view>
				<view class="payInfolist">
					<view class="payname">
						支付金额
					</view>
					<view class="paycontent" style="font-size: 36rpx; color: #FF4D4F;">
						￥520.13
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="Paymentmethod">
			<view class="title">
				支付方式
			</view>
			<uv-radio-group v-model="radiovalue" class="methods" @change="see">
				<view class="method">
					<view class="name">
						自费支付
					</view>
					<uv-radio name="自费支付"></uv-radio>
				</view>
				<view class="method">
					<view class="name">
						医保支付
					</view>
					<uv-radio name="医保支付"></uv-radio>
				</view>
			</uv-radio-group>
		</view>
		<!-- 确认缴费按钮 -->
		<button class="confirm" @click="confirm">确认缴费</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

	// 支付方式切换
	const radiovalue = ref('自费支付')
	const see = () => {
		console.log(radiovalue.value)
	}
	
	// 确认缴费
	const confirm = () => {
		console.log('确认缴费')
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
		// 缴费信息
		.paymentInfo{
			width: 100%;
			height: 430rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 32rpx 44rpx;
			box-sizing: border-box;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-weight: 700;
				font-size: 28rpx;
				margin-bottom: 36rpx;
			}
			.payInfolists{
				.payInfolist{
					height: 40rpx;
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					margin-bottom: 18rpx;
					.payname{
						color: #7f7f7f;
						width: 114rpx;
						margin-right: 62rpx;
					}
				}
			}
		}
		// 订单信息
		.orderInfo{
			width: 100%;
			height: 326rpx;
			border-radius: 16rpx;
			padding: 32rpx 44rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 30rpx;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-weight: 700;
				font-size: 28rpx;
				margin-bottom: 36rpx;
			}
			.payInfolists{
				.payInfolist{
					height: 40rpx;
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					margin-bottom: 18rpx;
					.payname{
						color: #7f7f7f;
						width: 114rpx;
						margin-right: 62rpx;
					}
				}
			}
		}
		// 支付方式
		.Paymentmethod {
			width: 100%;
			height: 312rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx 44rpx;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #000;
			margin-top: 30rpx;
			.title {
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		
			.methods {
				display: block !important;
		
				.method {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		.confirm {
			// width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #fff;
			background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1058.svg') !important;
			background-size: cover !important;
			position: fixed;
			bottom: 40rpx;
			left: 30rpx;
			right: 30rpx;
		}
	}
</style>
